<template>
  <div class="index-header">
    <div class="contain">
      <div class="contain-top">
        <div class="contain-top-logo" @click="handleReload">
          <div class="logo1">{{title1}}</div>
          <div class="logo2">{{title2}}</div>
        </div>
        <div class="contain-top-search">
          <div class="search">
            <input type="text" v-model="searchValue" :placeholder="placeholder" @keyup.enter="handleSearch"/>
            <button @click="handleSearch">搜索</button>
          </div>
          <div class="hotWord" v-if="hotWord.length !== 0">
            <span v-for="(item,index) in hotWord" :key="index">
              <span class="cursor" @click="() => {handleWord(item)}">{{item}}</span> |
            </span>
          </div>
        </div>
      </div>
      <div class="contain-bottom">
        <div class="contain-bottom-title" :style="{background: titleBgColor}">{{title}}</div>
        <div v-if="isShowTab" class="contain-bottom-goodsButton">
          <div v-for="(item,index) in goodsTypes" :key="index">
            <div :class="{'goodsButton': true, 'goodsButtonSelect': selected === index}" @click="()=>{ handleClick(item,index) }">
              {{item}}
            </div>
          </div>
        </div>
        <div class="contain-bottom-other">
          <slot name="other"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexHeader',
  inject: ['reload'],
  props: {
    //输入框提示
    placeholder: {
      type: String,
      default: '请输入你所需要的内容'
    },
    //搜索事件
    searchEvent: {
      type: [Boolean, Function],
      default: false
    },
    //点击标题是否可以跳回首页
    ifTitleClick: {
      type: [Boolean,Function],
      default: true
    },
    //热词
    hotWord: {
      type: Array,
      default: () => {
        return []
      }
    },
    //tab条按钮内容
    goodsTypes: {
      type: Array,
      default: () => {
        return ['模板', '组件', '图片', '图标', 'SDK']
      }
    },
    title: {
      type: String,
      default: '天鹿市场分类'
    },
    title1: {
      type: String,
      default: '天鹿市场'
    },
    title2: {
      type: String,
      default: '天鹿的SuperStore'
    },
    //tab条按钮点击回调时间
    handleChange: {
      type: Function,
      default: () => { }
    },
    //底部最左边div背景色
    titleBgColor: {
      type: String,
      default: ''
    },
    //是否显示tab条
    isShowTab: {
      type: Boolean,
      default: false
    },
    //tab条按钮是否默认选中第0个
    selectedDefault: {
      type: [Boolean, Number],
      default: false
    }
  },
  computed: {
    selected(){
      return this.selectedDefault || this.selectedDefault === 0 ? this.selectedDefault : null;
    }
  },
  data () {
    return {
      searchValue: '',
    }
  },
  methods: {
    handleSearch () {
      if(this.searchEvent){
        //带回搜索值
        this.searchEvent(this.searchValue);
      }
    },
    handleClick (which, index) {
      if (this.handleChange) {
        this.handleChange(which, index);
      }
    },
    handleWord(word){
      this.searchValue = word;
      this.handleSearch();
    },
    handleReload(){
      if(this.ifTitleClick){
        this.reload();
        if(typeof this.ifTitleClick === 'function'){
          this.ifTitleClick();
        }
      }
    }
  },
}
</script>
<style lang="scss" src='./index.scss' scoped />